<template>
  <div class="container">
    <div id="toolbar-container" class="toobar"></div>
    <div id="text-container" class="text"></div>
  </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
  name: 'Editor',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      editor: ''
    }
  },
  watch: {
    content () {
      this.editor.txt.html(this.content)
    }
  },
  methods: {

  },
  mounted () {
    const editor = new WangEditor('#toolbar-container', '#text-container')
    // editor.config.height = 600
    editor.config.onchange = (newHtml) => {
      if (newHtml) {
        // this.$emit('update:content', newHtml)
        this.$emit('handleEditorChange', newHtml)
      }
    }
    editor.create()
    this.editor = editor
  },
  beforeDestroy () {
    this.editor.destroy()
    this.deitor = null
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 50px 0 0 50px;
}
.toobar {
  border: 1px solid #ccc;
  width: 500px;
}
.text {
  border: 1px solid #ccc;
  margin-top: 20px;
  width: 375px;
  height: 500px;
}
</style>
